<template>
  <view class="sign-out-apply-view">
    <view class="tips">
      <h2>注销后数据不可恢复</h2>
    </view>
    <view class="phone-form">
      <view class="phone-number-text"> +86 {{ phoneNumber }} </view>
      <view class="verification-code">
        <input
          type="number"
          class="verification-code-input"
          v-model="verificationCode"
          placeholder="输入验证码"
        />
        <view
          class="verification-code-btn"
          v-if="!hasSendVerificationCodeFlag"
          @click="handleClickGetVerificationCodeBtn"
        >
          获取验证码</view
        >
        <view class="verification-code-count-down" v-else
          >{{ countDown }} 秒</view
        >
      </view>
      <view
        :class="[
          'next-step',
          verificationCode.length > 3 ? '' : 'next-step-disabled',
        ]"
        @click="handleClickApplySignOutBtn"
      >
        <h5>确认注销</h5>
      </view>
    </view>
  </view>
</template>
<script setup>
import { inject, ref } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { useHiddenIntermediatePhoneNumber } from "@/utils/formatHooks";
import {
  applySignOutApi,
  getPowerEquivalenceApi,
  getVerificationCodeApi,
} from "@/api/user";

// 验证码
const verificationCode = ref("");
// 是否点击获取验证码
const hasSendVerificationCodeFlag = ref(false);

/**
 * 监听点击获取验证码按钮
 */
const handleClickGetVerificationCodeBtn = () => {
  getPowerEquivalence();
};

// 幂等值
const powerEquivalence = ref("");
/**
 * 获取幂等值
 * @returns {Promise<void>}
 */
const getPowerEquivalence = async () => {
  const params = {
    phone: uni.getStorageSync("userPhoneNumber"),
  };
  const res = await getPowerEquivalenceApi(params);
  const { code, data } = res;
  if (code === 200) {
    powerEquivalence.value = data;
    await getVerificationCode();
  }
};

/**
 * 获取短信验证码
 * @returns {Promise<void>}
 */
const getVerificationCode = async () => {
  const params = {
    mdKey: powerEquivalence.value,
    phoneNumberArray: [uni.getStorageSync("userPhoneNumber")],
    templateId: "2113161",
  };
  const res = await getVerificationCodeApi(params);
  const { code, data } = res;
  if (code === 200 && data) {
    await uni.showToast({
      title: "已发送验证码短信，请注意查收",
      icon: "success",
      duration: 2000,
    });
    startCountDown();
    hasSendVerificationCodeFlag.value = true;
  }
};

// 计时器Id
let intervalId = null;
// 计时器回显
const countDown = ref(30);

/**
 * 开启验证码倒计时
 */
const startCountDown = () => {
  intervalId = setInterval(() => {
    if (countDown.value > 0) countDown.value--;
    else {
      clearInterval(intervalId);
      hasSendVerificationCodeFlag.value = false;
      countDown.value = 30;
    }
  }, 1000);
};

const packageLoginPath = inject("packageLoginPath");
/**
 * 下一步按钮点击事件监听
 * @returns {boolean}
 */
const handleClickApplySignOutBtn = async () => {
  if (verificationCode.value.length < 4) return false;
  const params = {
    code: verificationCode.value,
    phone: uni.getStorageSync("userPhoneNumber"),
  };
  const res = await applySignOutApi(params);
  const { code } = res;
  if (code === 200) {
    await uni.showToast({
      title: "注销成功",
      icon: "success",
      duration: 2000,
    });
    setTimeout(async () => {
      await uni.navigateTo({
        url: `${packageLoginPath}/login`,
      });
    }, 2000);
    uni.removeStorageSync("token");
  }
};

const phoneNumber = ref("");
onLoad(() => {
  phoneNumber.value = useHiddenIntermediatePhoneNumber(
    uni.getStorageSync("userPhoneNumber")
  );
});

onUnload(() => {
  intervalId && clearInterval(intervalId);
});
</script>
<style scoped lang=less>
.sign-out-apply-view {
  padding: 40rpx 100rpx;
  font-family: "ali";
  .tips {
    width: 100%;
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
    h2 {
      font-size: 56rpx;
    }
  }
  .phone-form {
    width: 100%;
    margin-top: 10rpx;
    .phone-number-text {
      height: 80rpx;
      font-weight: 700;
      font-size: 48rpx;
      color: #999;
      padding-left: 30rpx;
    }
    .verification-code {
      display: flex;
      height: 80rpx;
      border-bottom: 2rpx solid #ccc;
      margin-top: 20rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
      line-height: 80rpx;
      &-input {
        height: 100%;
        text-align: start;
      }
      &-btn,
      &-count-down {
        text-align: end;
        color: #708dd9;
      }
      &-input,
      &-btn,
      &-count-down {
        flex: 1;
      }
    }
    .next-step {
      margin-top: 80rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      background-color: #708dd9;
      color: #fff;
      font-size: 40rpx;
      text-align: center;
      // h5 {
      //   font-size: 40rpx;
      //   text-align: center;
      // }
    }
    .next-step-disabled {
      background-color: #cccccc;
    }
  }
}
</style>
